  var screen={
        personArray:[],
        personTmpArr : [],
        tempArr:[],
        tempArr_1:[],
        curPersonNum:0,
        postTime:30000,
        showTime:4500,
        controlPushNum:0,//personArray push操作的控制器
        animate:{
            in:['bounceIn','bounceInDown','bounceInLeft','bounceInRight','bounceInUp','fadeIn','fadeInDown','fadeInDownBig','fadeInLeft','fadeInLeftBig','fadeInRight','fadeInRightBig','fadeInUp','fadeInUpBig','rotateIn','rotateInDownLeft','rotateInDownRight','rotateInUpLeft','rotateInUpRight','slideInDown','slideInLeft','slideInRight'],
            out:['bounceOut','bounceOutDown','bounceOutLeft','bounceOutRight','bounceOutUp','fadeOut','fadeOutDown','fadeOutDownBig','fadeOutLeft','fadeOutLeftBig','fadeOutRight','fadeOutRightBig','fadeOutUp','fadeOutUpBig','rotateOut','rotateOutDownLeft','rotateOutDownRight','rotateOutUpLeft','rotateOutUpRight','slideOutDown','slideOutLeft','slideOutRight']
        }
    };
    /*获取签到人头像和名字*/
    var jsonUrl= './tsconfig02.json';
    //模拟ajax get请求
    function getDatat(param,callback) {
        $.ajax({
            type:'get',
            data: param,
            url: jsonUrl,
            error: function (req, txt) {
                callback({ errcode: req.status, errmsg: req.statusText, statustxt: txt });
            },
            success: function (data) {
                callback(data);
            }
        });
    }
    function getSignData(){
        getDatat(null,function(data){
            //console.log(data)
            $.each(data.rows,function(index,item){
                var controlPushNum = screen.controlPushNum;
                if(index == controlPushNum) {
                    screen.personArray.push({
                        headSrc: item['headimgurl'],
                        name: item['TrueName'] ? item['TrueName'] : item['nickname']
                    });
                    screen.controlPushNum++;
                }

            });
           	//将已经签到的数据直接放上去
            for(var i = 0;i<data.rows.length ;i++){
            	var img = document.getElementsByClassName('element')[i].getElementsByTagName('img')[0];
                img.setAttribute('src', data.rows[i].headimgurl);
            	document.getElementsByClassName('element')[i].style.display = 'block';
            }
        });
    };
    getSignData();

    // 定时获取签到人数
    //setInterval("getSignData()",screen.postTime);
    // 显示签到人头像
//  setInterval("showHeader()",screen.showTime);

	//点击事件模拟socket on事件 addPerson()
	$(document).click(function(){
		$.get('updata.json',function(data){
			addPerson(data.rows)
		})
	})
	
	
    // 增加人头像
    function addPerson(data){
        // get animate
        var rand_in = parseInt(Math.random() * screen.animate.in.length,10);
        var rand_out = parseInt(Math.random() * screen.animate.out.length,10);
        if(screen.personArray.length>= 280){
            screen.curPersonNum = 0;
        }else{
        	screen.curPersonNum = screen.personArray.length
        }
        $('.show_info .intro').html(data.nickname);
        $('.show_info img').attr('src', data.headimgurl);
        $('.show_info .info_mem').css('display', 'show');
        $('.show_info').show();
        $('.show_info').addClass(screen.animate.in[rand_in]);
        
        setTimeout(function () {
            $('.show_info').removeClass(screen.animate.in[rand_in]);
            // 更改展示的图片
            var img = document.getElementsByClassName('element')[screen.curPersonNum].getElementsByTagName('img')[0];
            img.setAttribute('src', data.headimgurl);
            document.getElementsByClassName('element')[screen.curPersonNum].style.display = 'block';
            ++screen.curPersonNum;
            setTimeout(function () {
                $('.show_info').addClass(screen.animate.out[rand_out]);
                setTimeout(function () {
                    $('.show_info').removeClass(screen.animate.out[rand_out]);
                    $('.show_info').hide();
                }, 1000);
            }, 1000);
        }, 1000);
    };

    // 生成虚拟数据
    for(var i=0;i<300;i++){
        screen.personTmpArr.push({
          /*  image: ""*/
        });
    }
/*---------------------------------------------------------------------------------------------------------------------------------------------------------*/
    // 建立数据展示源 并分配坐标（表格排列需要使用）
    var table = new Array;
    for (var i = 0; i <  screen.personTmpArr.length; i++) {
        table[i] = new Object();
        if (i <  screen.personTmpArr.length) {
            table[i] =  screen.personTmpArr[i];
//          table[i].src = screen.personTmpArr[i].image;
        }
        table[i].p_x = i % 20 + 1;
        table[i].p_y = Math.floor(i / 20) + 1;
    }


    var camera, scene, renderer;
    var controls;

    var objects = [];
    var targets = {table: [], sphere: [], helix: [], grid: []};
    init();
    animate();

    function init() {
		//参数1 拍摄距离
		//倒数第一参数 最大范围 倒数第二是最小范围
        camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 10000);
        camera.position.z = 3000;

        scene = new THREE.Scene();

        // table

        for (var i = 0; i < table.length; i++) {

            var element = document.createElement('div');
            element.className = 'element';
            element.style.backgroundColor = 'rgba(0,127,127,' + ( Math.random() * 0.5 + 0.25 ) + ')';

            var img = document.createElement('img');
            img.src = table[i].image;
            element.appendChild(img);


            var object = new THREE.CSS3DObject(element);
            object.position.x = Math.random() * 4000 - 2000;
            object.position.y = Math.random() * 4000 - 2000;
            object.position.z = Math.random() * 4000 - 2000;
            scene.add(object);

            objects.push(object);

            // 表格需要坐标进行排序的
            var object = new THREE.Object3D();
            // object.position.x = ( table[ i + 3 ] * 140 ) - 1330;
            //   object.position.y = - ( table[ i + 4 ] * 180 ) + 990;
            object.position.x = ( table[i].p_x * 140 ) - 1330;
            object.position.y = -( table[i].p_y * 180 ) + 990;

            targets.table.push(object);

        }

        // sphere

        var vector = new THREE.Vector3();
        var spherical = new THREE.Spherical();

        for (var i = 0, l = objects.length; i < l; i++) {

            var phi = Math.acos(-1 + ( 2 * i ) / l);
            var theta = Math.sqrt(l * Math.PI) * phi;

            var object = new THREE.Object3D();

            spherical.set(800, phi, theta);

            object.position.setFromSpherical(spherical);

            vector.copy(object.position).multiplyScalar(2);

            object.lookAt(vector);

            targets.sphere.push(object);

        }

        // helix

        var vector = new THREE.Vector3();
        var cylindrical = new THREE.Cylindrical();

        for (var i = 0, l = objects.length; i < l; i++) {

            var theta = i * 0.175 + Math.PI;
            var y = -( i * 5 ) + 450;

            var object = new THREE.Object3D();

            // 参数一 圈的大小 参数二 左右间距 参数三 上下间距
            cylindrical.set(900, theta, y);

            object.position.setFromCylindrical(cylindrical);

            vector.x = object.position.x * 2;
            vector.y = object.position.y;
            vector.z = object.position.z * 2;

            object.lookAt(vector);

            targets.helix.push(object);

        }

        // grid

        for (var i = 0; i < objects.length; i++) {

            var object = new THREE.Object3D();

            object.position.x = ( ( i % 5 ) * 400 ) - 800; // 400 图片的左右间距  800 x轴中心店
            object.position.y = ( -( Math.floor(i / 5) % 5 ) * 300 ) + 500;  // 500 y轴中心店
            object.position.z = ( Math.floor(i / 25) ) * 200 - 800;// 300调整 片间距 800z轴中心店

            targets.grid.push(object);

        }

        //渲染
        renderer = new THREE.CSS3DRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.domElement.style.position = 'absolute';
        document.getElementById('container').appendChild(renderer.domElement);

        // 鼠标控制
        controls = new THREE.TrackballControls(camera, renderer.domElement);
/*
        controls.rotateSpeed = 0.5;
        controls.minDistance = 500;
        controls.maxDistance = 6000;
*/
        controls.rotateSpeed = 0.00000001;
        controls.minDistance = 1800;
        controls.maxDistance = 1800;


        controls.addEventListener('change', render);

        // 自动更换
        var ini = 0;
        setInterval(function () {
            ini = ini >= 3 ? 0 : ini;
            ++ini;
            switch (ini) {
                case 1:
                    transform(targets.helix, 2000);
                    break;
                case 2:
                    transform(targets.grid, 2000);
                    break;
                case 3:
                    transform(targets.sphere, 2000);
                    break;
            }
            /*sphere*/
        }, 10000);

        var button = document.getElementById('table');
        button.addEventListener('click', function (event) {
            transform(targets.table, 1000);
        }, false);

        var button = document.getElementById('sphere');
        button.addEventListener('click', function (event) {
            transform(targets.sphere, 2000);
        }, false);

        var button = document.getElementById('helix');
        button.addEventListener('click', function (event) {
            transform(targets.helix, 2000);
        }, false);

        var button = document.getElementById('grid');
        button.addEventListener('click', function (event) {
            transform(targets.grid, 2000);
        }, false);

        transform(targets.table, 2000);

        //

        window.addEventListener('resize', onWindowResize, false);

    }

    function transform(targets, duration) {

        TWEEN.removeAll();

        for (var i = 0; i < objects.length; i++) {

            var object = objects[i];
            var target = targets[i];

            new TWEEN.Tween(object.position)
                .to({
                    x: target.position.x,
                    y: target.position.y,
                    z: target.position.z
                }, Math.random() * duration + duration)
                .easing(TWEEN.Easing.Exponential.InOut)
                .start();

            new TWEEN.Tween(object.rotation)
                .to({
                    x: target.rotation.x,
                    y: target.rotation.y,
                    z: target.rotation.z
                }, Math.random() * duration + duration)
                .easing(TWEEN.Easing.Exponential.InOut)
                .start();

        }


        new TWEEN.Tween(this)
            .to({}, duration * 2)
            .onUpdate(render)
            .start();

    }

    function onWindowResize() {

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize(window.innerWidth, window.innerHeight);

        render();

    }

    function animate() {

        // 让场景通过x轴或者y轴旋转  & z
        // scene.rotation.x += 0.011;
        scene.rotation.y += 0.008;

        requestAnimationFrame(animate);

        TWEEN.update();

        controls.update();

        // 渲染循环
        render();

    }

    function render() {

        renderer.render(scene, camera);

    }

